<template>
    <div class="quotations_wrap">
        <div class="optionCornal" v-show="cornalShow" :class="{side_fold_open:cornalShow}" @click.stop.prevent="closeCornal"></div>
        <div class="q_main" @mouseenter="setCornal">
            <el-row class="q_head">
                <div class="h_top">
                    <span>群语录</span>
                    <span @click="closeCornal">
                        <img :src="closeImg" alt="">
                    </span>
                </div>
                <div class="h_search">
                    <el-input
                        size="small"
                        @keyup.enter.native="searchKey"
                        placeholder="搜索语录关键字"
                        suffix-icon="el-icon-search"
                        v-model="keyWords">
                    </el-input>
                </div>
            </el-row>
            <div class="q_list">
                <div class="item" v-for="(item, index) in list" :key="index"  @mouseenter.stop.prevent="mouseOnQuotation(item)" @mouseleave.stop.prevent="mouseLeaveQuotation(item)">
                    <div class="i_title">
                        <p><span style="color: #fa7500;margin-right:10px;">{{ item.CREATENAME }}</span>收藏于 {{ item.CREATEDATE }}</p>
                        <!-- zk注释。删除键的显隐 -->
                        <span class="deldeteIcon" @click="delteleQuotation(item)" v-show="position == 1 && item.SHOWDELETE"><i class="el-icon-delete"></i></span>
                    </div>
                    <div v-for="(text, index) in item.VALUE" :key="index">
                        <div class="i_content">
                            <div class="c_left">
                                <img :src="!$isNull(text.head)?(`${$store.state.headPathUrl}${text.userId}${text.head}.PNG`):`static/image/home/person_${text.gender==2?2:1}.png`" class="imgs" :onerror="defaultImg">
                                <div class="details">
                                    <p class="names">{{ text.sendName }}</p>
                                </div>
                            </div>
                            <div class="c_right">{{ text.time }}</div>
                        </div>    
                        <div class="c_left" style="margin-left:56px;">
                            <!-- zk修改，重点语录特殊符号的替换 -->
                            <p class="text" style="overflow: hidden"  v-html="text.text"></p>
                        </div>                               
                    </div>
                </div>
            </div>
        </div>
        <div class="q_foot">
            <span class="seeAll" @click.stop.prevent="allTextSee">查看全部语录 >></span>
        </div>
    </div>
</template>
<script>
import closeImg from '../../../static/image/home/nav_close.png'
import userImg from '../../../static/image/home/person_1.png'
export default {
    name: 'Quotations',
    props: {
        groupInfo: {
            type: Object,
            default: null
        },
        list: {
            type: Array,
            default: []
        },
        canDelete : {
            type: Boolean,
            default: false
        },
        position: {
            // type: Number,
            default: 3
        }
    },
    data () {
        return {
            defaultImg:'this.src="' + require('../../../static/image/home/person_1.png') + '"',
            closeImg,
            userImg,
            cornalShow: false,
            keyWords: '',
            ws: null
        }
    },
    created () {
        this.ws = this.$store.state.ws
    },
    mounted () {
        console.log(this.list, '组件内的重点语录');
    },
    methods: {
        // 重点语录鼠标移入
        mouseOnQuotation (item) {
            this.$set(item, 'SHOWDELETE', true)
            this.$forceUpdate()
        },
        // 重点语录鼠标移出
        mouseLeaveQuotation (item) {
            this.$set(item, 'SHOWDELETE', false)
            this.$forceUpdate()
        },
        setCornal () {
            this.cornalShow = true
        },
        // 关闭
        closeCornal () {
            this.$emit('closeCornal')
        },
        // 全部语录
        allTextSee () {
            this.$emit('allQuotations')
        },
        // 触发父组件删除当前语录
        delteleQuotation (item) {
          console.log(item,"重点语录")
            let arr = item.VALUE
            let idArr = []
            arr.map(e => {
                idArr.push(e.id)
            })
            let ids = idArr.join(',')
            this.$emit('delteleQuotation', ids)//zk修改，参数为语录id
        },
        // 搜索
        searchKey () {
            let keys = this.keyWords
            console.log(keys, "keys");
            let page = {
                pageSize: 30,
                pageNumber: 1,
            };
            let key = this.groupInfo.id;
            if (!keys) {
                this.ws.send(
                this.$publicSend(key, "1.500", "1.1.2008", {
                    groupId: this.groupInfo.id,
                    page: page,
                })
                );
            }
            this.ws.send(
                this.$publicSend(key, "1.500", "1.1.2008", {
                groupId: this.groupInfo.id,
                page: page,
                name: keys,
                })
            );            
        }
    }
}
</script>
<style lang="less" scoped>
.quotations_wrap {
    width: 340px;
    height: calc(100% - 42px);
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    border-left: 1px solid #ccc;
    .optionCornal {
        width: 12px;
        height:88px;
        background-size:100% 100%;
        cursor:pointer;
        position:absolute;
        left:-13px;
        top:157px;
        margin-top:-44px;
        opacity: 0;
        background: url('../../../static/image/home/side_open.png') no-repeat center center;
        &:hover{
            opacity: 1;
        }
    }
    &:hover .optionCornal{
        opacity: 1;
    }
    .side_fold_open{
        background:url('../../../static/image/home/side_fold.png') no-repeat center center;
    }
    .q_main {
        flex: 1;
        width: 340px;
        background-color: #fff;
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
        .q_head {
            width: 100%;
            padding-left: 12px;
            .h_top {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                img {
                    width: 30px;
                    height: 30px;
                }
            }
            .h_search {
                width: 100%;
                padding-right: 12px;
            }
        }
        .q_list {
            flex: 1;
            padding: 10px 0;
            overflow-y: scroll;
            &::-webkit-scrollbar {
                width: 0;
            }
            .i_title {
                height: 44px;
                background-color: #f6f6f6;
                padding: 10px 12px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                .deldeteIcon {
                    font-size: 16px;
                    cursor: pointer;
                    &:hover {
                        color: #fa7500;
                    }
                }
            }
            .i_content {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 10px 12px 0 12px;
                .c_left {
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    padding: 0;
                    .details {
                        display: flex;
                        flex-direction: column;
                        .names {
                            font-size: 12px;
                            color: #999;
                            margin-bottom: 6px;
                        }
                        .text {
                            font-size: 12px;
                            color: #333;
                        }
                    }               
                    .imgs {
                        width: 32px;
                        height: 32px;
                        border-radius: 5px;
                        margin-right: 12px;
                    }
                }
                .c_right {
                    color: #999;
                    font-size: 12px;
                    align-self: flex-start;
                }
            }
        }
    }
    .q_foot {
        align-self: flex-end;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        padding: 0 12px;
        text-align: right;
        border-top: 1px solid #ccc;
        .seeAll {
            cursor: pointer;
            color: #999;
            font-weight: bold;
            &:hover {
                color: #fa7500;
            }
        }
    }
}
</style>
